<template>
  <div class="map-box">
    <div id="map"></div>
    <div>
      <label for="vehicle">显示/隐藏内容</label>
      <input type="checkbox" name="vehicle" id="vehicle" :checked="false">
      <button id="bindEvent">给小车1绑定点击事件</button>
      <button id="unbindEvent">给小车1解绑点击事件</button>
      <button id="setAnimation">让小车2弹跳</button>
    </div>
  </div>
</template>
<script setup>
  import { onMounted } from 'vue'
  const loadScript = (url) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  const scripts = [
    'http://1.95.157.217/wmap/wmap.umd.js'
  ]
  async function loadScripts (scripts) {
    for (const url of scripts) {
      try {
        await loadScript(url);
      } catch (err) {
        console.error(`${url} failed:`, err);
      }
    }
  }
  onMounted(() => {
    loadScripts(scripts).then(() => {
      const map = new WMap.Map('map', {
        center: [116.48538303047181, 39.99969219049072],
        zoom: 5,
        minZoom: 3,
        maxZoom: 18
      })
      
      let isShowAllLpn = true
      
      // 矢量图标
      const marker = new WMap.Marker({
        map: map,
        fontSize: '12px',
        fontFamily: 'sans-serif',
        fontWeight: 'normal',
        fontColor: '#000',
        placement: 'point', // 默认为point
        labelBgColor: '#FFF', // 背景颜色
        borderColor: '#000', // 边框颜色
        borderWidth: '1', // 边框宽度
        textBaseline: 'bottom', // t  似乎无效
        textAlign: 'centrer', //文本对齐方式 ,似乎无效，设置会让文本消失
        labelXOffset: 0, // 水平文本偏移量
        labelYOffset: -30, // 垂直文本偏移量
        padding: [5, 5, 5, 5],
        // 上面为默认配置
        position: [126.30002638117096, 44.034284373652795],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: [-26, -13],
        label: '矢量图标: 旋转不停',
        labelYOffset: -42,
        padding: [5, 5, 5, 5],
        labelBgColor: 'skyblue', // 背景颜色
        angle: -90
      })
      
      // content 会覆盖 icon
      const marker1 = new WMap.Marker({
        map: map,
        position: new WMap.LngLat(111.75027560859681, 40.81268047174071),
        offset: [-40, -40],
        icon: 'https://webapi.amap.com/images/car.png',
        label: {
          content: buildMarkerContent(),
          offset: [-40, -60]
        },
        extData: {
          lpn: '川A123456789',
          colName: '黄色',
          id: '113123'
        }
      })
      function buildMarkerContent(item) {
        if (!isShowAllLpn || !item) {
          return ''
        }
      
        let lpnAndCol = item.lpn + '(' + item.colName + ')'
      
        let content =
          '<div class="WMap-single-box" style="white-space: nowrap">'+ lpnAndCol + '</div>'
        return content
      }
      const vehicleDom = document.getElementById('vehicle')
      const bindEventDom = document.getElementById('bindEvent')
      const unbindEventDom = document.getElementById('unbindEvent')
      const setAnimationDom = document.getElementById('setAnimation')
      const delAndAdd = document.getElementById('delAndAdd')
      
      //旋转不停
      setInterval(() => {
        const angle = marker && marker.getAngle() + 90
        marker && marker.setAngle(angle)
      }, 1000)
      
      //解绑事件
      bindEventDom.onclick = function () {
        marker1.on('click', e => {
          console.table(e.target.getPosition())
        })
      }
      
      //解绑事件
      unbindEventDom.onclick = function () {
        marker1.off('click')
      }
      
      // 车牌显示
      vehicleDom.onchange = function (e) {
        isShowAllLpn = e.target.checked
        const extData = marker1.getExtentData()
        marker1.setLabel({
          content: buildMarkerContent(extData),
          offset: [-40, -60]
        })
      }
      //设置弹跳动画
      setAnimationDom.onclick = function () {
        marker1.setAnimation('WMAP_ANIMATION_BOUNCE')
        setTimeout(function () {
          marker1.setAnimation('WMAP_ANIMATION_NONE')
        }, 1000)
      }
      // 点击车辆显示车牌
      marker1.on('click', e => {
        const extData = e.target.getExtentData()
        e.target.setLabel({
          content: buildMarkerContent(extData),
          offset: [-40, -60]
        })
      })
    })
  })
</script>

<style>
.map-box{
  height: calc(100vh - 20px)
}
#map {
  height: calc(100% - 100px);
}
button + button {
  margin-left: 10px;
}
</style>
